<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :class="{show: show}" :style="{top: top + 'px' }" >
			<view class="click-btn" @tap="toshow" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
				<view v-if="supertest != 3" >超级测试模式</view>
				<view v-els>授权控制模式</view>
				<!-- <view>导航</view> -->
			</view>
			<view class="nav-box">
				<view v-if="supertest != 3">超级模式用于工程师调试</view>
				<view v-if = "localID">您当前控制的房间：{{localID}}</view>
				<view style="display: flex;">
					<button v-if="supertest != 3" @click="btn(0)" style="flex: 1;">切换房间</button>
					<button @click="btn(1)" style="flex: 1;">点此退出</button>
				</view>
				
				<!-- <view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
					<view class="nav-icon" :style="{backgroundColor: btn.bgcolor}">{{btn.icon}}</view>
					<view class="nav-text">{{btn.text}}</view>
				</view> -->
			</view>
		</view>
		<view style="z-index: 10003;position: fixed;">
			<s-popup class="delaylist1" custom-class="center-popup" position="center" v-model="showCheckList">
				<view style="justify-content: center;padding-top: 20rpx; align-items: center;display: flex; padding-bottom: 15rpx;border-bottom:1rpx solid #828282;color: #353535; ">超管测试模式</view>
				<view style="padding: 30rpx;padding-bottom: 2rpx;">
					<view style="display: flex;margin-bottom: 20px;">
						对应编号：
						<input v-model="hotel.id" style="border: 1px solid #969696;" />
					</view>
					<view style="display: flex;margin-bottom: 20px;">
						对应房号：
						<input v-model="hotel.roomnum" style="border: 1px solid #969696;" />
					</view>
					<view style="display: flex;">
						<button @click="choosekt(1)">肯天样板间</button>
						<button @click="choosekt(2)">展板</button>
					</view>
					
				</view>
				<view class="promptbtn">
					<view class="promptbtn-tittle promptbtn-tittle-no" @click="showCheckList = false">取消</view>
					<view class="promptbtn-tittle promptbtn-tittle-ok" hover-class="promptbtn-tittle-oka" @click="controllrtToeq">确定</view>
				</view>
			</s-popup>
		</view>
		
	</view>
</template>

<script>
	import sPopup from '@/components/s-popup';
	import {screen} from "@/components/eqhading/eqhandling.js";
	import {_getRoomDeviceInfo} from '../../common/vmeitime-http/controller.js';
export default {
	components: {
		sPopup
	},
	data() {
		return {
			localID:uni.getStorageSync("controller").name,
			supertest:uni.getStorageSync('supertest'),
			hotel:{
				id:'',
				roomnum:''
			},
			showCheckList:false,//弹窗
			show: false ,// 是否显示
			top: 380,	// 顶端距离 
			deviationTop: 0,	// 偏移量
			windowHeight: uni.getSystemInfoSync().windowHeight,	// 视图高度 
			btnList: [		// 所有按钮 
				{
					icon: '首',
					text: '平台首页',
					bgcolor: '#FE7A7D'
				},
				{
					icon: '坛',
					text: '在线论坛',
					bgcolor: '#CAB493'
				},
				{
					icon: '工',
					text: '平台工具',
					bgcolor: '#91B3B2'
				},
				{
					icon: '发',
					text: '我的发布',
					bgcolor: '#959AB3'
				},
				{
					icon: '个',
					text: '个人资料',
					bgcolor: '#73B3C7'
				},
				{
					icon: '软',
					text: '关于软件',
					bgcolor: '#66B26A'
				},
			]
		};
	},
	methods: {
		toshow(){
			this.show = !this.show
			this.localID=uni.getStorageSync("controller").name
		},
		choosekt(num){
			if(num == 1){
				this.hotel.id = 2;
				this.hotel.roomnum = 2001
			}
			if(num == 2){
				this.hotel.id = 1;
				this.hotel.roomnum = 10011
			}
			
		},
		btn(num){
			if(num){
				this.$parent.closesuper()
			}else{
				this.showCheckList = true
			}
			
		},
		ranNun(len){
		    var number = ['0','1','2','3','4','5','6','7','8','9'];
		    var result = '';
		    for(var i = 0; i < len; i++){
		        var data = Math.ceil(Math.random() * 9);
		        result += number[data];
		    }
		    console.log(result);
		    return result;
		},
		addnum(length,num){
			return ((Array(length).join("0") + num).slice(-length)+"").split('').reverse().join('');
		},
		str(){
			// 获取当前日期
			var date = new Date();
			var strDate = date.getDate();
			console.log(strDate)
			let num = (strDate*1)%10
			if(num == 0){
				num = 10
			}
			let key = this.ranNun(num)+ this.addnum(4,this.hotel.id)+this.ranNun(num)+ this.addnum(8,this.hotel.roomnum)
			console.log(key)
			return key
		},
		controllrtToeq(){
			_getRoomDeviceInfo({str:this.str()}).then( res => {
				if(!res.data.data){
					uni.showToast({
						icon:"none",
						title:"没有此房间，或者此房间没有设备"
					})
					return;
				}
				uni.removeStorageSync('equipmentlist');
				uni.removeStorageSync('controller');
				let obj= {
				  id:res.data.data.id,
				  hotleId:res.data.data.hotleId,
				  name:res.data.data.localId,
				  localId:res.data.data.localId,
				  realName:"李楠翔",
				  roomType:res.data.data.roomType
				}
				uni.setStorageSync("controller",obj)
				if(screen(res.data.data.equipmentExecutors)){
					uni.setStorageSync("supertest",2)
					this.showCheckList = false
					
				}else{
					uni.showToast({
						icon:"none",
						title:"设备获取失败，请重试"
					})
				}  
				this.localID=uni.getStorageSync("controller").name
			})
				
		},
		// 点击按钮 
		clickBtn: function(btn) {
			console.log('点击了：' + btn.text);
		},
		// 拖动开始，记录一下偏移量
		touchstart: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			this.deviationTop = touch.clientY - this.top;
			// console.log(this.deviationTop);
		},
		// 上下拖动时 
		touchmove: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			var top = touch.clientY;
			top = top - this.deviationTop;
			if (top < 0) {
				top = 0;
			}
			if (top > this.windowHeight - 40) {
				top = this.windowHeight - 40;
			}
			this.top = top;
			return false;
		},
	}
};
</script>

<style>
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.4);
	}
	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 10001;
		position: fixed;
		width: 100%;
		/* height: 0px; */
		left: 600rpx;
		transition: left 0.5s;
		overflow: hidden;
	}
	/* 展开时 */
	.major-box.show{left: 110rpx;}
	
	.click-btn,
	.nav-box {
		float: left;
	}
	/* 按钮样式 */
	.nav-box{
		background-color: #FFF;
		border-radius: 0 0 0 5px;
	}
	.click-btn {
		width: 150rpx;
		background-color: #fe6d34;
		color: #fff;
		font-size: 10px;
		text-align: center;
		border-radius: 100rpx 0 0 100rpx;
		line-height: 20px;
		padding: 5px 0;
		font-size: 20rpx;
	}
	.click-btn view {
		padding-left: 15rpx;
	}

	/* 按钮盒子 */
	.nav-box {
		width: 500rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}
	.nav-btn {
		flex: 1;
		border: 0px #000 solid;
		min-width: 150rpx;
		padding: 12rpx 0;
		padding-bottom: 20rpx;
	}
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		font-size: 15px;
		border-radius: 50%;
		background-color: #666;
		color: #fff;
	}
	.nav-text {
		font-size: 12px;
		font-weight: bold;
		margin-top: 8rpx;
	}
	.delaylist1{
		z-index: 9999999;
	}
</style>
